<template>
	<view class="content">
		<view class="banner">
			<view class="information">
				<view class="contenta">
					<view class="one">
						<image class="logo" @click="snthecode" src="../../static/3212.png" mode=""></image>
						<view class="search" @click="guitar('')">
							<view class="button">
								<image src="../../static/306.png" mode=""></image>
							</view>
							<input class="input" type="text" placeholder='请输入搜索内容' style="font-size: 24rpx;" />
						</view>
					</view>
					<view class="broadcast">
						<swiper indicator-dots indicator-active-color="#FFFFFF" circular autoplay>
							<swiper-item v-for="(item,index) in banner" :key="index">
								<image :src=" item.imagesCarousel"></image>
							</swiper-item>
							<!-- 	<image src="../../static/307.png" mode=""></image> -->
						</swiper>
					</view>
					<!-- <view class="lately"> -->
					<!-- <view class="views"> -->
					<!-- <view class="views-a" v-for="item,index in navigationList.slice(0,10)" :key="index"
								@click="hotselling(item.id)">
								<image :src="item.icon" mode=""></image>
								<view class="article">
									{{item.name}}
								</view>
							</view> -->
					<!-- </view> -->
					<!-- </view> -->
					<view class="product">
						<view class="name">
							<view class="goods">
								<view class="cheng">
								</view> 课程
							</view>
							<view class="many" @click="guitar(1)">
								<text>更多</text>
								<uni-icons type="right" size="12" color="#999"></uni-icons>
							</view>
						</view>
						<view class="commodity">
							<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
								<view class=" list" @click="toshopinfos(item,item.id)" v-for="(item,index) in indexlist"
									:key="index">
									<image :src="item.cover" mode=""></image>
									<view class="name">
										<text>{{item.title}}</text>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="information">
						<view class="name">
							<view class="goods">
								<view class="cheng">
								</view> 专区
							</view>
							<view class="many" @click="guitar(2)">
								<text>更多</text>
								<uni-icons type="right" size="12" color="#999"></uni-icons>
							</view>
						</view>
						<view class="commodity">
							<view class=" list" v-for="(item,index) in alllist" :key="index"
								@click="toshopinfos(item,item.id)">
								<view class="img">
									<image :src="item.cover" mode=""></image>
								</view>
								<view class="text">
									<view class="name">
										<text>{{item.title}}</text>
									</view>
									<view class="introduce">
										{{item.chapterDetail}}
									</view>
									<view class="low">
										<view class="theheart">
											<image v-if="item.isCollect == 1" src="../../static/311.png" mode="">
											</image>
											<image v-if="item.isCollect == 2" src="../../static/313.png" mode="">
											</image>
										</view>
										<view class="money" v-if="item.price>0&&isVip==0">
											<text>￥</text>
											{{item.price}}
										</view>
										<!-- <view class="money" v-else> 免费 </view> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="kbai">
		</view>
	</view>
</template>
<script>
	import {
		imagesCarousel, //轮播图
		coursepage, //推荐或者是不推荐
		bindRecommendShip, //绑定推荐人
	} from "@/request/api.js"
	import {
		requestPermissions
	} from "@/js_sdk/yu-app-permission/yu-app-permission.js"
	export default {
		data() {
			return {
				itemList: [{
					name: '品牌特惠'
				}, {
					name: '甄选好物'
				}],
				selectedIdx: 0,
				banner: [],
				navigationList: [], //一级分类
				indexlist: [], //推荐列表
				alllist: [], //全部商品
				findByCategorylist: [],
				ids: '',
				reference: '',
				isVip: 0
			}
		},
		onLoad() {},
		onShow() {
			if (uni.getStorageSync('userInfo')) {
				this.isVip = uni.getStorageSync('userInfo').isVip
			}
			this.bannerList()
			this.coursepagea() //推荐
			this.coursepageb() //全部
			// this.getcaidan()
			// this.getIsIndexs()
			// this.brandCategorys()
		},
		methods: {
			async snthecode() {
				const {
					isSuc
				} = await requestPermissions({
					title: "相机/摄像头权限申请说明", // 申请权限时弹出框标题
					content: "便于您使用该功能扫码场景中使用", // 申请权限时弹出框内容
					permissionID: "CAMERA" // 权限ID
				})
				if (!isSuc) {
					return false
				}
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						this.reference = res.result
						bindRecommendShip({
							memberId: uni.getStorageSync('userInfo').id,
							masterId: this.reference,
						}).then(res => {
							console.log('绑定推荐人');
							if (res.code == 200) {
								uni.showToast({
									title: res.result,
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							}
						})
					},
				});
			},
			// bindRecommendShipa() {
			// 	bindRecommendShip({
			// 		masterId: this.reference,
			// 		memberId: uni.getStorageSync('userInfo').id
			// 	}).then(res => {
			// 		console.log('绑定推荐人');
			// 		uni.showToast({
			// 			title: res.message,
			// 			icon: 'none'
			// 		})
			// 	})
			// },
			//前往商品详情页
			toshopinfos(item, id) {
				// let isLogin = uni.getStorageSync('token')
				// if (!isLogin) {
				// 	uni.showToast({
				// 		title: '请先登录',
				// 		icon: "none"
				// 	})
				// 	setTimeout(() => {
				// 		uni.switchTab({
				// 			url: '/pages/my/index'
				// 		})
				// 	}, 1500)
				// 	return;
				// }
				getApp().globalData.details = item
				uni.navigateTo({
					url: '/pages/details/index?id=' + id
				})
			},
			//吉他课程
			guitar(index) {
				console.log('挑战');
				uni.navigateTo({
					url: '/pages/index/guitar?type=' + index
				})
			},
			//轮播图
			bannerList() {
				imagesCarousel().then(res => {
					this.banner = res.result
					console.log(res, '轮播图');
				})
			},
			//推荐商品
			coursepagea() {
				coursepage({
					memberId: uni.getStorageSync('userInfo').id,
					isHot: 1
				}).then(res => {
					console.log(res);
					this.indexlist = res.result.records
				})
			},
			//全部商品
			coursepageb() {
				coursepage({
					memberId: uni.getStorageSync('userInfo').id,
					isHot: 2
				}).then(res => {
					console.log(res);
					this.alllist = res.result.records
				})
			},
			// 去热销页面
			hotselling(id) {
				console.log('啊啊啊');
				uni.navigateTo({
					url: '/pages/index/hotselling?id=' + id
				})
			},
			// 去搜索页面
			homesearch() {
				console.log('啊啊啊');
				uni.navigateTo({
					url: '/pages/searchfor/homesearch'
				})
			},
			// 去详情页面
			details() {
				console.log('啊啊啊');
				uni.navigateTo({
					url: '/pages/details/index'
				})
			},
			// 去支付页面
			payment() {
				console.log('啊啊啊');
				uni.navigateTo({
					url: '/pages/index/hotselling'
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.imag {
		height: 814rpx;
		width: 100%;
		position: absolute;
		top: -100rpx;
		left: 0;
		z-index: -1;
		// background: linear-gradient(180deg, #40b5ff 0%, #b5de9600 100%);
		background: #f7f7f7;

		image {
			height: 480rpx;
			width: 100%;
		}
	}

	// .kbai {
	// 	height: 145rpx;
	// }
	.information {
		// margin-top: 120rpx;
		// position: absolute;
		// z-index: 1;
		// margin: 0 14rpx;
	}

	.search {
		display: flex;
		justify-content: space-between;
		height: 96rpx;
		background-color: #fff;
		align-items: center;
		border-radius: 50rpx;
		padding-left: 32rpx;
		box-sizing: border-box;

		.in {
			margin-left: 32rpx;
		}

		button {
			width: 120rpx;
			height: 80rpx;
			background-color: #FE5E25;
			text-align: center;
			line-height: 80rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			font-style: normal;
			text-transform: none;
			border-radius: 50rpx;
			margin-right: 10rpx;
		}
	}

	.topstart {
		height: var(--status-bar-height);
	}

	.content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background: #f7f7f7;
		// padding: 24rpx;
		// box-sizing: border-box;
		// padding-bottom: 50rpx;
	}

	.banner {
		// padding: 0rpx 24rpx;
		box-sizing: border-box;
		position: relative;
		padding-bottom: 165rpx;
		z-index: 2;
		// height: 480rpx;
		// background-image: url(../../static/1786.png);
		// background-size: cover;
		// background-position: center;
		background-color: #fafafa;
	}

	.header {
		margin: 0 14rpx;
		position: relative;
		z-index: 1;
		padding-top: 48rpx;
		// text-align: center;
		color: #170000;
		font-size: 36rpx;
		margin-bottom: 30rpx;
		display: flex;

		// justify-content: space-between;
		// margin-top: 108rpx;
		.title {
			margin-right: 100rpx;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.address {
			display: flex;
			align-items: center;

			image {
				width: 38.8rpx;
				height: 32.6rpx;
				margin-right: 8rpx;
			}

			.addressa {
				width: 210rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #390F01;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					display: -webkit-box;
					-webkit-line-clamp: 1;
					/* 设置显示的最大行数 */
					-webkit-box-orient: vertical;
					/* 垂直排列文本内容 */
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.contenta {
		// background-color: #fafafa;
		height: 100%;
	}

	.logo {
		width: 62rpx;
		height: 62rpx;
	}

	.one {
		display: flex;
		align-items: center;
		margin: 16rpx;
		margin-top: 0;
		background: #fff;
		padding-top: 50rpx;
	}

	.search {
		width: 90%;
		margin: 0 14rpx;
		// display: flex;
		// justify-content: space-between;
		height: 56rpx;
		background: #f6f6f6;
		// align-items: center;
		border-radius: 50rpx;
		padding-left: 32rpx;
		padding-right: 70rpx;

		.in {
			margin-left: 32rpx;
		}

		.button {
			// text-align: center;
			// line-height: 39.19rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			font-style: normal;
			text-transform: none;
			border-radius: 50rpx;

			// margin-right: 10rpx;
			image {
				width: 36rpx;
				height: 36rpx;
				// margin-right: 15rpx;
			}
		}

		.input {}
	}

	.broadcast {
		margin: 0 14rpx;
		// width: 100%;
		height: 351rpx;
		border-radius: 16rpx;
		margin-top: 28rpx;

		swiper {
			height: 351rpx;

			swiper-item {
				height: 351rpx;
			}
		}

		image {
			width: 100%;
			border-radius: 20rpx;
			height: 351rpx;
		}
	}

	.lately {
		margin: 0 14rpx;
		// margin: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 20rpx;
		padding: 0rpx 10rpx 32rpx;
		box-sizing: border-box;

		.views {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;

			.views-a {
				text-align: center;
				margin-top: 32rpx;
				width: 20%;

				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50rpx;
					margin-bottom: 25rpx;
				}

				.article {
					font-weight: 400;
					font-size: 24rpx;
					color: #282828;
				}
			}
		}
	}

	.everyday {
		margin: 0 14rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 32rpx;

		.everyday-a {
			width: 48%;
			// height: 531rpx;
			background: linear-gradient(172.9deg, #fcf4ad80 0%, #ffffff00 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 19rpx 16rpx 36rpx;
			box-sizing: border-box;

			.title {
				font-weight: 700;
				font-size: 30rpx;
				color: #333333;
				display: flex;
				align-items: center;

				.lvse {
					image {
						width: 148rpx;
						height: 32rpx;
					}
				}
			}

			.goods {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.name {
					text-align: center;
					margin-top: 25rpx;

					image {
						width: 126rpx;
						height: 126rpx;
					}

					.text {
						font-weight: 400;
						font-size: 20rpx;
						color: #282828;
					}
				}
			}
		}

		.everyday-b {
			width: 48%;
			padding: 19rpx 29rpx 22rpx;
			background: linear-gradient(172.9deg, #d4f7c880 0%, #ffffff00 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			box-sizing: border-box;

			.title {
				font-weight: 700;
				font-size: 30rpx;
				color: #333333;
				display: flex;
				align-items: center;

				.lvse {
					image {
						width: 148rpx;
						height: 32rpx;
					}
				}
			}

			.goods {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.name {
					text-align: center;
					margin-top: 15rpx;

					image {
						width: 120rpx;
						height: 120rpx;
						margin-bottom: 16rpx;
					}

					.text {
						font-weight: 400;
						font-size: 20rpx;
						color: #282828;
					}
				}
			}
		}
	}

	.product {
		// margin: 24rpx;
		padding: 26rpx 14rpx;
		// background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 20rpx;
		box-sizing: border-box;

		// background: linear-gradient(180deg, #ff9d3470 0%, #ffffff00 100%);
		.name {
			margin-left: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 26rpx;

			// margin-bottom: 25rpx;
			.goods {
				// border-left: 8rpx solid #FF9C34;
				display: flex;
				align-items: center;

				.cheng {
					width: 8rpx;
					height: 38rpx;
					border-radius: 430rpx;
					background: #ff9c34;
					margin-right: 12rpx;
				}

				image {
					width: 148rpx;
					height: 32rpx;
				}
			}

			.many {
				margin-right: 20rpx;
				color: #999999;
				font-size: 24rpx;
				font-weight: 400;
			}
		}

		.commodity {
			.scroll-view_H {
				// display: flex;
				// justify-content: space-between;
				// flex-wrap: wrap;
				white-space: nowrap;
				width: 100%;

				.list {
					width: 590rpx;
					height: 268rpx;
					// margin-bottom: 50rpx;
					background: #FFF;
					border-radius: 20rpx;
					padding-bottom: 16rpx;
					display: inline-block;
					text-align: center;
					font-size: 36rpx;
					margin-right: 14rpx;

					/* 超出部分显示三个省略号 */
					image {
						width: 590rpx;
						height: 268rpx;
						border-radius: 16rpx;
					}

					.name {
						color: #000000;
						font-size: 28rpx;
						font-weight: 700;
						padding: 0 8rpx;

						// margin: 38rpx 0 26rpx;
						text {
							overflow: hidden;
							/* 确保内容超出容器时会被隐藏 */
							white-space: nowrap;
							/* 确保文本在一行内显示，避免换行 */
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}

	.information {
		// margin: 24rpx;
		padding: 26rpx 14rpx;
		// background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 20rpx;
		box-sizing: border-box;

		// background: linear-gradient(180deg, #ff9d3470 0%, #ffffff00 100%);
		.name {
			// margin-left: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			// margin-bottom: 26rpx;
			// margin-bottom: 25rpx;
			.goods {
				// border-left: 8rpx solid #FF9C34;
				display: flex;
				align-items: center;

				.cheng {
					width: 8rpx;
					height: 38rpx;
					border-radius: 430rpx;
					background: #ff9c34;
					margin-right: 12rpx;
				}

				image {
					width: 148rpx;
					height: 32rpx;
				}
			}

			.many {
				margin-right: 20rpx;
				color: #999999;
				font-size: 24rpx;
				font-weight: 400;
			}
		}

		.commodity {
			margin-top: 20rpx;

			.list {
				height: 216rpx;
				border-radius: 22rpx;
				background: #ffffff;
				display: flex;
				align-items: center;
				padding: 22rpx 26rpx 28rpx 18rpx;
				box-sizing: border-box;
				margin-top: 20rpx;

				.img {
					width: 328rpx;
					height: 166rpx;

					image {
						width: 328rpx;
						height: 166rpx;
					}
				}

				.text {
					margin-left: 20rpx;

					.name {
						width: 288rpx;
						color: #000000;
						font-size: 28rpx;
						font-weight: 700;

						// margin: 38rpx 0 26rpx;
						text {
							overflow: hidden;
							/* 确保内容超出容器时会被隐藏 */
							white-space: nowrap;
							/* 确保文本在一行内显示，避免换行 */
							text-overflow: ellipsis;
						}
					}

					.introduce {
						color: #3333334d;
						font-size: 24rpx;
						font-weight: 500;
						margin-top: 18rpx;
						margin-bottom: 22rpx;
					}

					.low {
						display: flex;
						justify-content: space-between;

						.theheart {
							width: 48rpx;
							height: 48rpx;

							image {
								width: 48rpx;
								height: 48rpx;
							}
						}

						.money {
							color: #d73c38;
							font-size: 36rpx;
							font-weight: 500;

							text {
								color: #d73c38;
								font-size: 24rpx;
								font-weight: 500;
							}
						}
					}
				}
			}
		}
	}
</style>